<template>
    <el-container>
        <div class="right-panel">
            <div class="right-panel-search" style="width: 100%; margin-top: 5px; margin-bottom: 5px">

                <div class="panel-search-box" style="width: 300px">
                    <span class="demonstration" style="margin-left: 10px">时间范围:</span>
                    <el-date-picker v-model="timeHorizon" type="daterange" range-separator="-" start-placeholder="起始时间"
                        end-placeholder="截止时间" format="YYYY-MM-DD" value-format="YYYY-MM-DD" :size="size"
                        style="margin-left: 10px; width: 250px !important" />
                </div>

                <div class="panel-search-box" style="width: 300px">
                    <span class="demonstration" style="margin-left: 10px">公告主题:</span>
                    <el-input v-model="search.feedbackName" placeholder="请输入公告主题"
                        style="margin-left: 10px; width: 250px" clearable></el-input>
                </div>

                <div style="flex: 1; display: flex; justify-content: right; align-items: center; padding-right: 20px">
                    <div class="panel-search-box">
                        <el-button type="primary" style="margin-left: 10px" @click="upsearch">查询</el-button>
                        <el-button type="" @click="cleanSearch">清空</el-button>
                    </div>
                </div>

                <div style="flex: 1; display: flex; justify-content: right; align-items: center; padding-right: 20px">
                    <el-button type="primary" style="" @click="dialogNotice = true">发布新公告</el-button>
                    <el-button type="primary" style="" @click="dialogSlideShow = true">发布新轮播图</el-button>
                </div>
            </div>
        </div>
        <el-header style="display: none"></el-header>


        <el-main class="nopadding">
            <scTable ref="table" :apiObj="apiObj" :params="params" stripe border remoteSort remoteFilter
                @selection-change="selectionChange">
                <el-table-column fixed='left' type="selection" :selectable="displaySelection"
                    width="50"></el-table-column>

                <el-table-column fixed='left' label="公告时间" prop="id" align="center" min-width="150">
                    <template #default="scope">
                        <span>{{ changeDate(scope.row.msgDate) }}</span>
                    </template>
                </el-table-column>
                <el-table-column fixed='left' label="公告主题" prop="name" align="center" min-width="150">
                    <template #default="scope">
                        <span>{{ scope.row.msgTitle }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" fixed="right" align="center" width="150">
                    <template #default="scope">
                        <el-button-group>
                            <el-button link :disabled="scope.row.status == 1" type="warning" size="small"
                                @click="handleMsg(scope.row)">{{ scope.row.msgType == 1 ? '轮播图详情' : '公告详情'
                                }}</el-button>
                        </el-button-group>
                    </template>
                </el-table-column>
            </scTable>
        </el-main>

        <el-drawer v-model="dialogSlideShow" title="发布新轮播图" width="500">
            <div style="padding: 20px;">
                <el-upload v-model:file-list="fileList" :action="action" :headers="headers" list-type="picture-card"
                    :on-remove="handleRemove">
                    <el-icon>
                        <Plus />
                    </el-icon>
                </el-upload>
            </div>


            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="dialogSlideShow = false">取消</el-button>
                    <el-button type="primary" @click="addSlideshow">
                        确定
                    </el-button>
                </div>
            </template>
        </el-drawer>

        <el-drawer v-model="dialogNotice" title="发布新公告" width="500">
            <div style="padding: 20px;">
                <el-form :model="noticeForm" label-width="auto" style="max-width: 500px">
                    <el-form-item label="请输入公告主题:">
                        <el-input v-model="noticeForm.title" />
                    </el-form-item>
                    <el-form-item label="">
                        <el-input :autosize="{ minRows: 15 }" placeholder="请输入公告内容" v-model="noticeForm.content" type="textarea" />
                    </el-form-item>
                </el-form>
            </div>


            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="dialogNotice = false">取消</el-button>
                    <el-button type="primary" @click="addNotice">
                        确定
                    </el-button>
                </div>
            </template>
        </el-drawer>

        <el-drawer v-model="dialogNoticeDetail" title="公告详情" width="500">
            <div style="text-align: center;padding: 20px;">
                <p style="font-size: 18px;">
                    {{ noticeDetail.msgTitle }}
                </p>
                <div style="display: flex;justify-content: center;color: #ababab;width: 100%;margin:20px 0;">
                    <div>
                        操作人：{{ noticeDetail.opName }}

                    </div>
                    <div style="margin-left: 20px;">
                        日期：{{ changeDate(noticeDetail.msgDate) }}

                    </div>
                </div>
                <div style="width: 100%;text-indent: 20px;text-align: left;font-size: 16px;">
                    <div  v-html="noticeDetail.msgContent.replace(/\n/g, '<br>')"></div>

                </div>

            </div>
        </el-drawer>

        <el-drawer v-model="dialogslideDetail" title="轮播详情"  size="40%">
            <div style="padding: 20px;display: flex;flex-wrap: wrap;justify-content: center;">
                <div v-for="(item, index) in imgArr" :key="index">
                    <img :src="item" alt="" @click="clickImg(item)" style="width: 200px;height: 200px;margin: 10px">
                </div>
            </div>
        </el-drawer>

        <el-dialog v-model="dialogImg" width="40%">
            <div style="width: 100%;height: 100%;display: flex;justify-content: center;align-items: center">
                <img w-full :src="imgUrl" alt="" style="width: 500px;height: 450px"/>
            </div>
        </el-dialog>



    </el-container>
</template>

<script>
import tool from '@/utils/tool'
import { ElMessage } from 'element-plus'
export default {
    name: 'notice',
    data() {
        return {
            search: {},
            apiObj: this.$API.notice.noticeList,
            timeHorizon: '',
            dialogSlideShow: false,
            dialogNotice: false,
            dialogNoticeDetail: false,
            dialogslideDetail: false,
            dialogImg:false,
            noticeDetail: [],
            fileList: [],
            imgArr:[],
            noticeForm: {
                title: '',
                content: '',
            },
            imgUrl: '',
            headers: {
                accesstoken: tool.cookie.get('TOKEN')
            },
            action: import.meta.env.VITE_APP_API_BASEURL + '/file/imageUpload'
        }

    },
    watch: {

    },
    computed: {

    },
    mounted() {
        // this.render()
    },
    methods: {
        upsearch() {
            if (this.timeHorizon) {
                this.search.startDate = this.timeHorizon[0]
                this.search.endDate = this.timeHorizon[1]
            }
            this.$refs.table.upData(this.search)
        },
        cleanSearch() {
            this.search = {}
            this.timeHorizon = null
            this.$refs.table.reload(this.search)
        },
        changeDate(dateString) {
            const date = new Date(dateString);
            const year = date.getFullYear();
            const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始，所以需要加1，并确保是两位数
            const day = String(date.getDate()).padStart(2, '0'); // 确保是两位数
            // 组合成年-月-日格式
            const formattedDate = `${year}-${month}-${day}`;
            return formattedDate
        },
        handleRemove(file) {
            console.log(file)
        },
        async addNotice() {
            let today = new Date();
            let year = today.getFullYear();
            let month = today.getMonth() + 1;
            let day = today.getDate();
            // 确保月份和日期是两位数，若小于 10 则补零
            month = month < 10 ? '0' + month : month;
            day = day < 10 ? '0' + day : day;
            let msgDate = `${year}-${month}-${day}`;
            if (this.noticeForm.content.length == 0 || this.noticeForm.title.length == 0) {
                ElMessage.error('请填写公告主题和内容')
                return
            }

            let res = await this.$API.notice.noticeAdd.post({ data: [{ msgType: 2, msgTitle: this.noticeForm.title, msgDate, msgContent: this.noticeForm.content }] })
            this.dialogNotice = false
            if (res.code == 0) {
                ElMessage({
                    message: '已发布新公告！',
                    type: 'success',
                    plain: true,
                })
                this.noticeForm.title = ''
                this.noticeForm.content = ''
                this.$refs.table.upData(this.search)
            }

        },
        async addSlideshow() {
            let today = new Date();
            let year = today.getFullYear();
            let month = today.getMonth() + 1;
            let day = today.getDate();
            // 确保月份和日期是两位数，若小于 10 则补零
            month = month < 10 ? '0' + month : month;
            day = day < 10 ? '0' + day : day;
            let msgDate = `${year}-${month}-${day}`;
            if (this.fileList.length == 0) {

                ElMessage.error('请至少选择一张轮播图！')
                return
            }
            let msgImagesId = []
            this.fileList.forEach((e) => {
                msgImagesId.push(e.response.data)
            })

            let res = await this.$API.notice.noticeAdd.post({ data: [{ msgType: 1, msgTitle: '轮播图', msgDate, msgImagesId: msgImagesId.join(';') }] })
            this.dialogSlideShow = false
            if (res.code == 0) {
                ElMessage({
                    message: '已发布新的轮播图！',
                    type: 'success',
                    plain: true,
                })
                this.$refs.table.upData(this.search)
                this.fileList = []
            }

        },
        clickImg(e){
            this.imgUrl=e
            this.dialogImg=true

        },
        handleMsg(data) {
            if (data.msgType == 2) {
                this.dialogNoticeDetail = true
                this.noticeDetail = data
            }
            if (data.msgType == 1) {
                this.dialogslideDetail = true
                this.imgArr = []
                let imgData = data.msgImagesId.split(';')
                imgData.forEach((id) => {
                    this.getImg(id)
                })
            }
        },
        async getImg(id) {
            let res = await this.$API.emp.feedbackImage.get({ fileId: id })
            const imageBase64 = btoa(
                new Uint8Array(res).reduce((data, byte) => data + String.fromCharCode(byte), '')
            )
            // 使用base64编码字符串来显示图像
            // this.imgUrl = `data:image/jpeg;base64,${imageBase64}`
            let url = `data:image/jpeg;base64,${imageBase64}`
            this.imgArr.push(url)
        },



    },


}

</script>

<style scoped>
.header-btn-item {
    display: flex;
}

.read1 {
    color: #999999;
}

.read2 {
    color: #f5a21d;
}
</style>
